<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--360浏览器优先以webkit内核解析-->
<title>数据报表</title>
<link rel="shortcut icon" href="favicon.ico">
<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet" />
<link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet" />
<link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet" />
</head>

<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-sm-3">
				<div class="ibox">
					<div class="ibox-content">
						<h5 class="m-b-md">接入系统数</h5>
						<h2 class="text-navy">
							<i class="fa fa-desktop"></i>
							<samp th:text="${clientCount}">0</samp>
						</h2>
					</div>
				</div>
			</div>
			<div class="col-sm-3">
				<div class="ibox">
					<div class="ibox-content">
						<h5 class="m-b-md">今日登录人数</h5>
						<h2 class="text-navy">
							<i class="fa fa-user"></i>
							<samp th:text="${loginCount}">0</samp>
						</h2>
					</div>
				</div>
			</div>
			<div class="col-sm-3">
				<div class="ibox">
					<div class="ibox-content">
						<h5 class="m-b-md">在线人数</h5>
						<h2 class="text-navy">
							<i class="fa fa-play fa-rotate-270"></i>
							<samp th:text="${onlineCount}">0</samp>
						</h2>
					</div>
				</div>
			</div>
			<div class="col-sm-3">
				<div class="ibox">
					<div class="ibox-content">
						<h5 class="m-b-md">在职员工</h5>
						<h2 class="text-navy">
							<i class="fa fa-users"></i>
							<samp th:text="${employCount}">0</samp>
						</h2>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-sm-12">
				<div class="ibox">
					<div class="ibox-title">
						<h5>访问量</h5>
					</div>
					<div class="ibox-content">
						<div style="height: 500px" id="echarts-traffic-volume"></div>
					</div>
				</div>
			</div>

		</div>
	</div>
	<script th:src="@{/js/jquery.min.js}"></script>
	<script th:src="@{/js/bootstrap.min.js}"></script>
	<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
	<script th:src="@{/ajax/libs/echarts/echarts.min.js}"></script>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document
				.getElementById('echarts-traffic-volume'), 'light');

		// 指定图表的配置项和数据
		var option = {
			tooltip : {
				trigger : 'axis',
				axisPointer : {
					type : 'cross',
					label : {
						backgroundColor : '#6a7985'
					}
				}
			},
			legend : {
				data : [ '访问人数', '访问人次' ]
			},
			toolbox : {
				feature : {
					saveAsImage : {}
				}
			},
			grid : {
				left : '3%',
				right : '4%',
				bottom : '3%',
				containLabel : true
			},
			xAxis : [ {
				type : 'category',
				boundaryGap : false,
				data : [ '单点系统', '易起学', '工时系统']
			} ],
			yAxis : [ {
				type : 'value'
			} ],
			series : [ {
				name : '访问人数',
				type : 'line',
				stack : '总量',
				areaStyle : {},
				data : [ 320, 332, 301]
			}, {
				name : '访问人次',
				type : 'line',
				stack : '总量',
				areaStyle : {},
				data : [ 220, 182, 199 ]
			} ]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	</script>
</body>
</html>
